/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
} from 'react-native';

var  TabBarDemo = React.createClass({
    //设置初始值
    getInitialState(){
      return{
        //默认被选中的tabBarItem
          selectedTabBarItem: 'home'
      }
    },
    render(){
      return(
          <View style={styles.container}>
              {/*头部*/}
            <View style={styles.headerViewStyle}>
              <Text style={{color:'white', fontSize:18}}>Tab选项卡的切换</Text>
            </View>
              {/*选项卡*/}
            <TabBarIOS
                barTintColor='lightgray'
                tintColor= 'green'
            >
                {/*第一块*/}
              <TabBarIOS.Item
                  systemIcon='contacts'
                  badge='3'
                  selected={this.state.selectedTabBarItem == 'home'}
                  onPress={()=>{this.setState({selectedTabBarItem:'home'})}}
              >
                <View style={[styles.commonViewStyle,{backgroundColor:'yellow'}]}>
                  <Text>第一页</Text>
                </View>

              </TabBarIOS.Item>
                {/*第二块*/}
              <TabBarIOS.Item
                  systemIcon='favorites'
                  selected={this.state.selectedTabBarItem == 'second'}
                  onPress={()=>{this.setState({selectedTabBarItem:'second'})}}
              >
                <View style={[styles.commonViewStyle,{backgroundColor:'orange'}]}>
                  <Text>第二页</Text>
                </View>

              </TabBarIOS.Item>
                {/*第三块*/}
              <TabBarIOS.Item
                  systemIcon='search'
                  selected={this.state.selectedTabBarItem == 'third'}
                  onPress={()=>{this.setState({selectedTabBarItem:'third'})}}
              >
                <View style={[styles.commonViewStyle,{backgroundColor:'green'}]}>
                <Text>第三页</Text>
              </View>

              </TabBarIOS.Item>
                {/*第四块*/}
              <TabBarIOS.Item
                  systemIcon='more'
                  selected={this.state.selectedTabBarItem == 'fourth'}
                  onPress={()=>{this.setState({selectedTabBarItem:'fourth'})}}
              >
                <View style={[styles.commonViewStyle,{backgroundColor:'blue'}]}>
                  <Text>第四页</Text>
                </View>

              </TabBarIOS.Item>
            </TabBarIOS>
          </View>

      )
    }
})
const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#F5FCFF',
  },
  headerViewStyle:{
    height:64,
    backgroundColor:'red',
    justifyContent:'center',
    alignItems:'center'
  },
  commonViewStyle:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  }

});

AppRegistry.registerComponent('TabBarDemo', () => TabBarDemo);
